<script setup>
// import { ref } from "vue";
import empty from './empty.vue';

function copyCode(code) {
	uni.setClipboardData({
		data: code,
		success() {
			console.log('success');
		}
	});
}

const props = defineProps({
	orderList: {
		type: Array,
		default: []
	}
});
console.log(props.orderList);

//  status  0 待发货 1 带收货 2 已送达 3 订单完成 4 退货
// pay_status = 0 未付款
// pay_status = 1 已付款
function goPay(id) {
	uni.navigateTo({
		url: `/subpkg/CreatOrder/CreatOrder?created=true&&id=${id}`
	});
}

function goDetail(id) {
	uni.navigateTo({
		url: '/subpkg/OrderDetails/OrderDetails?id=' + id
	});
}

async function refundOrder(id) {
	console.log('申请退款');
	uni.redirectTo({
		url: `/subpkg/ApplyRefund/ApplyRefund?id=${id}`
	});
}
</script>

<template>
	<view class="orderList">
		<view class="order-card-item" v-for="item in orderList" :key="item.order_no">
			<view class="card-nav">
				<view class="order-code">
					订单号:
					<text @click="copyCode(item.order_no)">{{ item.order_no }}</text>
				</view>
				<view class="pay-status" v-if="item.pay_status == 0 && item.status !== 99">待付款</view>
				<view class="pay-status" v-else-if="item.status == 0 && item.pay_status == 1">待发货</view>
				<view class="pay-status" v-else-if="item.status == 1">待收货</view>
				<view class="pay-status" v-else-if="item.status == 3">已完成</view>
				<view class="pay-status" style="color: #6b6b6b" v-else-if="item.status == 99">交易关闭</view>
				<view class="pay-status" style="color: #6b6b6b" v-else-if="item.status == 97">退货中</view>
				<view class="pay-status" style="color: #6b6b6b" v-else-if="item.status == 98">退款完成</view>
				<view class="pay-status" v-else-if="item.status == 2">已发货</view>
			</view>

			<navigator v-for="goods in item.shopProduct" :key="item.id" class="buy-info" :url="`/pages/ProductDetails/ProductDetails?goodsId=${goods.product_id}`">
				<view class="goods-image">
					<image lazy-load :src="goods.image" mode="aspectFit"></image>
				</view>
				<view class="right-area">
					<view class="goods-info-title">
						{{ goods.title }}
					</view>
					<view class="pay-info">
						<view class="money">¥ {{ goods.unit_price }}</view>
						<view class="num">x {{ goods.count }}</view>
					</view>
				</view>
			</navigator>

			<view class="settle-accounts">
				<!-- 共 {{goods.count}} 件商品 -->
				应付:
				<text>¥{{ item.total_amount }}</text>
				优惠抵扣:
				<text>¥{{ item.discount }}</text>
			</view>

			<view class="control-button">
				<!-- <button class="cancel" hover-class="cancel-click" v-if="item.pay_status==0">取消订单</button> -->
				<button class="paynow" hover-class="paynow-click" v-if="item.pay_status == 0 && item.status !== 99" @click="goPay(item.id)">去支付</button>
				<button class="cancel" hover-class="cancel-click" v-if="item.status == 0 && item.pay_status == 1" @click="refundOrder(item.id)">申请退款</button>
				<!-- <button class="cancel" hover-class="cancel-click" v-if="item.pay_status =1  item.status==0 || item.status==1 ||item.status ==2"
					@click="goDetail">查看物流</button> -->
				<!-- <button class="paynow-see" hover-class="paynow-click" v-if="item.pay_status == 1" @click="goDetail(item.id)">查看订单</button> -->
				<button class="paynow-see" hover-class="paynow-click" @click="goDetail(item.id)">查看订单</button>
				<!-- <button class="paynow" hover-class="paynow-click" v-if="item.status == 2 || item.status == 3"
					@click="goDetail(item.id)">确认收货</button>
				<button class="paynow" hover-class="paynow-click" v-if="item.status == 3">再买一单</button> -->
				<!-- <button class="paynow" hover-class="paynow-click" v-if="item.status == 99">重新下单</button> -->
			</view>
		</view>
			<empty v-if="!orderList.length"></empty>
	</view>
</template>

<style lang="scss">
.orderList {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15rpx 0 35rpx 0;

	.order-card-item {
		width: 695rpx;
		padding: 25rpx 15rpx;
		margin-bottom: 25rpx;
		background-color: #fefefe;
		border-radius: 15rpx;
		border: #eeeeee 1rpx solid;

		.card-nav {
			height: 65rpx;

			.order-code {
				float: left;
			}

			.pay-status {
				float: right;
				color: $custom-theme-red;
			}
		}

		.buy-info {
			height: 200rpx;
			border-bottom: 1rpx solid #fbf2fd;

			.goods-image {
				float: left;
				width: 200rpx;
				height: 200rpx;

				image {
					width: 180rpx;
					height: 180rpx;
				}
			}

			.right-area {
				float: left;
				height: 200rpx;
				width: 450rpx;

				.goods-info-title {
					width: 100%;
					height: 83rpx;
					margin-bottom: 60rpx;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					/* 设置显示的行数 */
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 32rpx;
				}

				.pay-info {
					display: flex;
					justify-content: space-between;
					width: 100%;

					.money {
						font-size: 36rpx;
						color: $custom-theme-red;
					}

					.num {
						color: #bab9ba;
					}
				}
			}
		}

		.settle-accounts {
			height: 70rpx;
			line-height: 70rpx;
			text-align: right;
			display: block;
			font-size: 26rpx;
			border-bottom: 1rpx solid #fbf2fd;

			text {
				font-size: 30rpx;
				color: $custom-theme-red;
			}
		}

		.control-button {
			display: flex;
			justify-content: flex-end;
			padding-top: 20rpx;

			button {
				margin: 0 0 0 20rpx;
				width: 195rpx;
				height: 66rpx;
				line-height: 64rpx;
				border-radius: 33rpx;
				text-align: center;
				font-size: 32rpx;

				&:after {
					border: none;
				}
			}

			.cancel {
				background-color: #fff;
				border: 1rpx solid #cfcfcf;
				color: #888;
			}

			.cancel-click {
				background-color: #eeeeee;
			}

			.paynow {
				background-color: $custom-theme-color;
				color: #fefefe;
			}

			.paynow-see {
				background-color: #fefefe;
				border: #4e0072 1px solid;
				color: $custom-theme-color;
			}

			.paynow-nav {
				margin: 0 0 0 20rpx;
				width: 195rpx;
				height: 66rpx;
				line-height: 64rpx;
				border-radius: 33rpx;
				text-align: center;
				font-size: 32rpx;
				background-color: $custom-theme-color;
				color: #fefefe;
			}

			.paynow-click {
				background-color: lighten($color: $custom-theme-color, $amount: 10%);
			}
		}
	}
}
</style>
